<template>
  <view class="addpets">
    <view class="addpets-form">
      <view class="form">
        <uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
          <uv-form-item borderBottom prop="userInfo.name">
            宠物名字
            <uv-input
              v-model="model1.userInfo.name"
              border="none"
              placeholder="请输入宠物名字"
              inputAlign="right"
            />
          </uv-form-item>
          <uv-form-item
            label="类型"
            v-model="model1.userInfo.sex"
            prop="userInfo.sex"
            borderBottom
            @click="showSexSelect"
          >
            <uv-input
              v-model="model1.userInfo.sex"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择类型"
              border="none"
              inputAlign="right"
            />
            <template v-slot:right>
              <uv-icon name="arrow-right"></uv-icon>
            </template>
          </uv-form-item>
          <uv-form-item borderBottom prop="userInfo.age">
            年龄
            <uv-input
              border="none"
              v-model="model1.userInfo.age"
              placeholder="请输入宠物年龄"
              inputAlign="right"
            />
          </uv-form-item>
          <uv-form-item>
            性别
            <uv-radio-group v-model="radiovalue">
              <uv-radio
                :customStyle="{ margin: '8px' }"
                v-for="(item, index) in radiolist"
                :key="index"
                :label="item.name"
                :name="item.name"
              />
            </uv-radio-group>
          </uv-form-item>
          <uv-form-item> 主人描述 </uv-form-item>
          <uv-form-item borderBottom>
            <uv-textarea v-model="textara" placeholder="请输入内容" />
          </uv-form-item>
          <uv-form-item> 宠物图片 </uv-form-item>
          <uv-form-item borderBottom>
            <uv-upload :fileList="fileList1" name="1" multiple :maxCount="10" @afterRead="afterRead"
              @delete="deletePic"></uv-upload>
          </uv-form-item>
          <uv-button
            type="primary"
            text="保存"
            color="#008c8c"
            shape="circle"
            customStyle="margin-top: 10px"
            @click="submit"
          />
        </uv-form>
        <uv-action-sheet
          ref="sexSelect"
          :actions="actions"
          title="请选择类型"
          @select="sexSelect"
        />
      </view>
    </view>
  </view>
</template>

<script>
import { uniRequest } from "../../../utils/request/request";

export default {
  data() {
    return {
      imagePath: '',
      fileList1: [],
      textara: "",
      radiovalue: "女生",
      radiolist: [
        { name: "女生", disabled: false },
        { name: "男生", disabled: false },
      ],
      model1: {
        userInfo: {
          name: "",
          sex: "",
          age: "",
        },
      },
      actions: [{ name: "类型一" }, { name: "类型二" }, { name: "类型三" }],
      rules: {
        "userInfo.name": {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        "userInfo.sex": {
          type: "string",
          required: true,
          message: "请选择类型",
          trigger: ["blur", "change"],
        },
        "userInfo.age": {
          type: "string",
          required: true,
          message: "请填写年龄",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  methods: {
    // 提交表单
    submit() {
      this.$refs.form
        .validate()
        .then((res) => {
          uni.showToast({
            icon: "success",
            title: "校验通过",
          });
        })
        .catch((errors) => {
          uni.showToast({
            icon: "error",
            title: "校验失败",
          });
        });

      const id = Math.ceil(Math.random() * 100);
      const name = this.model1.userInfo.name;
      const type = this.model1.userInfo.sex; 
      const sex = this.radiovalue; 
      const age = this.model1.userInfo.age;
      const description = this.textara;

      console.log(name, sex, age, description,);

      uniRequest(
        "pet/add?server=1",
        (err, data) => {
          if (err) {
            console.log(err);
          } else {
            console.log("成功了", data);
          }
        },
        "POST",
        {
          master_id: id,
          name: name,
          type: type,
          sex: sex,
          age: age,
          description: description,
          image: '#',
        }
      );
    },
    // 显示类型选择
    showSexSelect() {
      this.$refs.sexSelect.open();
      this.hideKeyboard();
    },
    // 类型选择返回结果
    sexSelect(e) {
      this.model1.userInfo.sex = e.name;
      this.$refs.form.validateField("userInfo.sex");
    },
    // 隐藏键盘
    hideKeyboard() {
      uni.hideKeyboard();
    },
    chooseImage() {
      // 使用 uni.chooseImage 选择图片
      uni.chooseImage({
        count: 1, // 默认选择一张图片
        sizeType: ['original', 'compressed'], // 可以选择原图或压缩图
        sourceType: ['album', 'camera'], // 选择来源：相册或相机
        success: (res) => {
          // 获取到图片路径
          this.imagePath = res.tempFilePaths[0];
        },
        fail: (err) => {
          console.error(err);
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import url(./addpets.css);
</style>
